import React, { useState } from 'react'
import { Table } from 'antd'
import type { ColumnsType } from 'antd/es/table';
/**
 * columns 表格列信息
 * dataSource 表格的数据源 [{},{}]
 */
interface ITodo {
    id: number;
    title: string;
    isDone: boolean;
}
type ITodos = ITodo[]
export default function PageTest() {
    let [current, setCurrent] = useState(1);// 状态数据当前页
    let [pageSize, setPageSize] = useState(1);// 每页显示几条
    const columns: ColumnsType<ITodo> = [
        {
            title: 'id',// 指定列名
            dataIndex: 'id' // 数据源的属性名
        },
        {
            title: '待办事项',
            dataIndex: 'title'
        },
        {
            title: '是否完成',
            dataIndex: 'isDone',
            // 自定义渲染内容
            render(value: any, row: ITodo, index: number) {
                // 如果有dataIndex的配置，那么value取的就是dataIndex指定的属性值
                // 如果乜有dataIndex配置，那么value的值就是当前遍历的行对象，跟第二个参数row一样
                console.log('value: ', value);
                console.log('row: ', row);// 当前遍历对象
                console.log('index: ', index);// 索引

                return value ? '已完成' : '未完成'
            }
        }
    ]

    const dataSource: ITodos = [
        {
            id: 1,
            title: '吃饭',
            isDone: true
        },
        {
            id: 2,
            title: '睡觉',
            isDone: true
        },
        {
            id: 3,
            title: '打豆豆',
            isDone: false
        }

    ]
    return (
        <div>
            <Table
                rowKey={'id'} // key={todo.id}
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    // 当前页
                    current,
                    // 每页显示几条
                    pageSize,
                    // 总条数
                    total: 3,
                    // 是否显示每页显示几条的切换器
                    showSizeChanger: true,
                    // 切换器下拉列表选项
                    pageSizeOptions: [1, 5, 10, 20],
                    // 快速去哪一页的导航
                    showQuickJumper: true,
                    // 展示纵跳数据方法
                    showTotal: (total) => {
                        return <div>总共有 : {total} 条</div>
                    },
                    // 当当前页或pageSize每页显示几条发生变化的时候触发
                    onChange: (page, pageSize) => {
                        console.log(page, pageSize);
                        setCurrent(page);
                        setPageSize(pageSize);
                    }
                }}
            />
        </div>
    )
}
